<form action="#" class="layui-form">        <!--搜索-->
    <div class="layui-form-item">
        <div class="layui-inline" style="padding-top: 5px">
            &nbsp;&nbsp;
            <label>应用名称:</label>
            <div class="layui-inline">
                <input type="text" name="appName" autocomplete="off" placeholder="请输入应用名称"
                       class="layui-input">
            </div>
            <label>状态:</label>
            <div class="layui-inline">
                <select name="state">
                    <option value="">请选择</option>
                    <option value="0">无效</option>
                    <option value="1">有效</option>
                </select>
            </div>
            <div class="layui-inline">
                <button class="layui-btn" lay-submit lay-filter="appquery">搜索</button>
            </div>
        </div>
    </div>
</form>

<table id="app" lay-filter="app"></table> <!--触发的标记-->

<script>

    layui.use(['table', 'form', 'layer'], function () {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;

        form.render();  //搜索控件中，表单的渲染

        table.render({
            elem: '#app'
            , toolbar: '#my_toolbar'  //工具类的配置
            , height: 480
            , url: '/app/pageList'
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'},  //左侧复选框，用于选中进行批量删除
                /* field:属性名 */
                {field: 'id', title: '应用ID', width: 90, sort: true, fixed: 'left'}
                , {field: 'companyName', title: '所属公司'}
                , {field: 'appName', title: '应用名'}
                , {field: 'appKey', title: '应用KEY'}
                , {field: 'appSecret', title: '签名秘钥'}
                , {field: 'callbackUrl', title: '回调接口路径'}
                , {field: 'limitCount', title: '日免费次数'}
                , {field: 'description', title: '描述信息'}
                , {field: 'customerId', title: '客户ID'}
                , {
                    field: 'state', title: '状态', templet: function (data) {
                        return (data.state == 1) ? '<span class="layui-badge layui-bg-green">有效</span>' : '<span class="layui-badge layui-bg-red" >无效</span>'
                    }
                }
                , {field: "right", title: "操作", toolbar: '#barDemo'}

            ]]
            , page: {
                limit: 4
                , limits: [3, 4, 8, 9]
                , first: '首页'
                , last: '尾页'
                , prev: '<i class="layui-icon layui-icon-prev"></i>'
                , next: '<i class="layui-icon layui-icon-next"></i>'
                , layout: ['prev', 'page', 'next', 'count', 'limit', 'skip', 'refresh'] //自定义分页布局
            }
        });

        //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        table.on('tool(app)', function (obj) {
            var data = obj.data; //获得当前行数据
            //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var layEvent = obj.event;
            if (layEvent === 'del') { //删除
                layer.confirm('确定删除？', function (index) {
                    // 向服务端发送删除请求
                    // 此处可以发送ajax
                    $.ajax({
                        type: "delete",
                        url: "/app/remove/" + data.id,
                        success: function (res) {
                            console.log(res);
                            if (res > 0) {
                                obj.del(); //删除对应行（tr）的DOM结构
                                layer.msg("删除成功");
                                table.reload('app');   //重载父页的表单
                            } else
                                layer.msg("删除失败");
                        }
                    });
                    layer.close(index); //当前弹窗索引标记删除
                });
            } else if (layEvent === 'edit') {
                addOrEditWindow(data);
            }
        });


        //添加事件
        table.on("toolbar(app)", function (obj) {
            var layEvent = obj.event;
            if (layEvent === 'add') {
                addOrEditWindow(null);  //添加功能
            } else if (layEvent === 'batdel') {
                //获取选中对象
                var checkStatus = table.checkStatus("app");
                var data = checkStatus.data; //获取选中记录（容器）
                //循环变量data，然后取出每条记录的id
                var params = "";
                $.each(data, function (i, obj) {
                    params += "&ids=" + obj.id;   //批量参数，后台使用数组获取参数
                })
                if (params == "") {
                    layer.msg("请勾选要删除的数据");
                    return;
                }
                layer.confirm('确定删除？', function (index) {
                    //发ajax请求
                    $.ajax({
                        type: "post",  //批量删除为post请求
                        url: "/app/batchDelete",
                        data: params,
                        success: function (res) {
                            // alert("批量删除:" + res);
                            if (res > 0) {
                                layer.msg("删除成功");
                                //重新加载table
                                table.reload("app");
                            } else {
                                layer.msg("删除失败");
                            }
                        }
                    })
                    layer.close(index);  //删除弹出窗口
                })
            }
        })


        //添加或修改的方法
        function addOrEditWindow(data) {  //添加或编辑的封装

            layer.open({  //打开弹窗
                type: 1,  //文档形式展示
                content: $('#app-edit-layer').html(), //获取页面内容
                title: '编辑'  //标题
                , area: ['500px', '400px'],  //显示文档区域
                btn: ['提交', '取消'] //可以无限个按钮
                , yes: function (index, layero) { //点击提交后的触发
                    layer.load();  //进行编辑的时候显示加载效果
                    $.ajax({
                        type: "post",  //注意：此处序列化数据，需要使用post请求传数据
                        url: (data == null) ? "/app/save" : "/app/update", //修改
                        data: $("#app-edit-form").serialize(), //序列化数据
                        success: function (res) {
                            // alert("修改或添加: " + res);
                            if (res == 1 && data != null)
                                layer.msg("修改成功");
                            else if (res == 1 && data == null) {
                                layer.msg("添加成功");
                            }
                            table.reload('app');
                            layer.close(index);   //关闭窗口

                            layer.closeAll('loading'); //关闭加载图标
                        }
                    })
                }, success: function (layero, index) { //访问内容成功，则渲染表单数据

                    form.render(); //表单的渲染
                    if (data != null) { //编辑  为null，则是添加功能
                        //data中的属性，要与customer-edit-form的name属性名一致，才能注入
                        form.val("app-edit-form", data); //注入文本控件
                        form.val("app-edit-form", { //注入单选框的值
                            "state": data.state + ""
                        });
                    }

                    //打开弹窗，并通过ajax访问客户模块的控制层，得到客户id和公司名
                    $.ajax({
                        type: "get",
                        url: "/customer/list",
                        success: function (res) { //res是后端返回的客户集合
                            // console.log(res);
                            // console.log(typeof res);
                            for (var i = 0; i < res.length; i++) {
                                if (data && data.customerId == res[i].id) {
                                    var test = "";
                                    test = "<option selected value='" + res[i].id + "'>" + res[i].company + "</option>"
                                } else {
                                    test = "<option value='" + res[i].id + "'>" + res[i].company + "</option>"
                                }
                                $("#cusId").append(test);  //在select标签里面追加内容
                            }
                            form.render();  //表单渲染
                        }
                    })
                }
            });

        }

        //搜索
        form.on('submit(appquery)', function (data) {
            layer.msg(JSON.stringify(data.field));
            table.reload('app', {
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: data.field
            });
            return false;   //提交时局部刷新，不用整体刷新
        });

    });


</script>

<script type="text/html" id="my_toolbar">
    <a class="layui-btn layui-btn-xs" lay-event="add">添加</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="batdel">批量删除</a>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!-- 修改需要注入的内容 -->
<script type="text/html" id="app-edit-layer">
    <form id="app-edit-form" style="width: 80%" class="layui-form" lay-filter="app-edit-form">
        <input type="hidden" name="id">

        <div class="layui-form-item">
            <label class="layui-form-label">公司名</label>
            <div class="layui-input-block">
                <select id="cusId" name="customerId">  <!--下拉标签 -->
                    <!-- 以下数据，应该在显示编辑弹出框前，加载进来
                     <option value='id'>字节跳动</option> -->
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">应用名</label>
            <div class="layui-input-block">
                <input type="text" name="appName" class="layui-input" required>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">应用key</label>
            <div class="layui-input-block">
                <input type="text" name="appKey" class="layui-input" required>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">签名秘钥</label>
            <div class="layui-input-block">
                <input type="text" name="appSecret" class="layui-input" required>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">回调接口路径</label>
            <div class="layui-input-block">
                <input type="text" name="callbackUrl" class="layui-input" required>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">日免费次数</label>
            <div class="layui-input-block">
                <input type="text" name="limitCount" class="layui-input" required>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">描述信息</label>
            <div class="layui-input-block">
                <input type="text" name="description" class="layui-input" required>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="radio" name="state" title="有效" value="1" checked/>
                <input type="radio" name="state" title="无效" value="0"/>
            </div>
        </div>
    </form>
</script>